<template>
  <div class="mod-demo-echarts">
    <h3>仪表盘统计</h3>


    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="J_chartLineBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="J_chartLineBoxa" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="J_chartLineBoxb" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      chartLine: null,
      quarterProtocol: [],
      quarterIntendCustomer: [],
      chartLineCustomer: null,
      chartLineSignUser: null,
      quarterIntendSignUser: [],
      quarterUser: []
    }
  },
  mounted () {
    this.getQuarterProtocolDateList()
    this.getQuarterIntendCustomerDateList()
    this.getQuarterIntendSignUser()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize()
    }
    if (this.chartLineCustomer) {
      this.chartLineCustomer.resize()
    }
    if (this.chartLineSignUser) {
      this.chartLineSignUser.resize()
    }
  },
  methods: {


    getQuarterProtocolDateList () {
      let quarterProtocola = []
      this.$http({
        url: this.$http.adornUrl('/tb_bs_protocol/bsprotocol/quarterProtocol'),
        method: 'get'
      }).then(({data}) => {
        for (let i = 0; i < data.date.length; i++) {
          this.quarterProtocol.push(data.date[i].num)
        }
        quarterProtocola = this.quarterProtocol
        var option = {
          'title': {
            'text': '合同签约统计'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': { }
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': [ '第一季度', '第二季度', '第三季度', '第四季度' ]
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': '合同季度数量统计',
              'type': 'line',
              'stack': '总量',
              'data': quarterProtocola
            }
          ]
        }
        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      })
},

    getQuarterIntendCustomerDateList () {
      let quarterIntendCustomera = []
      this.$http({
        url: this.$http.adornUrl('/tb_bs_protocol/bsprotocol/quarterIntendCustomer'),
        method: 'get'
      }).then(({data}) => {
        for (let i = 0; i < data.date.length; i++) {
          this.quarterIntendCustomer.push(data.date[i].num)
        }
        quarterIntendCustomera = this.quarterIntendCustomer
        var option = {
          'title': {
            'text': '线索人访问统计'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': { }
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': [ '第一季度', '第二季度', '第三季度', '第四季度' ]
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': '线索人季度数量统计',
              'type': 'line',
              'stack': '总量',
              'data': quarterIntendCustomera
            }
          ]
        }
        this.chartLineCustomer = echarts.init(document.getElementById('J_chartLineBoxa'))
        this.chartLineCustomer.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLineCustomer.resize()
        })
      })
    },

    getQuarterIntendSignUser () {
      let quarterIntendSignUsera = []
      let quarterUsera = []
      this.$http({
        url: this.$http.adornUrl('/tb_bs_protocol/bsprotocol/quarterProtocolSignUser'),
        method: 'get'
      }).then(({data}) => {
        for (let i = 0; i < data.date.length; i++) {
          this.quarterIntendSignUser.push(data.date[i].num)
          this.quarterUser.push('第'+(i+1)+'季度' + '(' + data.date[i].signUser + ')')
        }
        console.log(data)
        console.log("=======" + data.date)
        quarterIntendSignUsera = this.quarterIntendSignUser
        quarterUsera = this.quarterUser
        var option = {
          'title': {
            'text': '季度销冠人员统计'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': { }
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': quarterUsera
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': '季度销冠人员统计',
              'type': 'line',
              'stack': '总量',
              'data': quarterIntendSignUsera
            }
          ]
        }
        this.chartLineSignUser = echarts.init(document.getElementById('J_chartLineBoxb'))
        this.chartLineSignUser.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLineSignUser.resize()
        })
      })
    }
  }
}
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>

